import React, { Component } from 'react'
import { getParams } from '@/utils'
import { UserOutlined, PlusOutlined } from '@ant-design/icons'
import { Avatar, Button, Form, Radio, Checkbox, Select, Input, Upload, DatePicker, ConfigProvider } from 'antd'

export default class My extends Component {
    constructor(props) {
        super(props)
        console.log('this', this)
        // this.state = {
        //     name: 'wxy',
        //     age: 20
        // }
    }

    state = {
        name: 'wxy',
        age: 20,
    }

    hello = 'world'

    // 生命周期 - 组件渲染完成
    componentDidMount() {
        console.log('--- 页面加载完成 ---')
        console.log('获取url参数')
        console.log(getParams('name'))
    }
    handleUpdate = () => {
        this.setState({
            name: '似水流年',
            age: 33,
        })
    }

    // 组件更新完成
    componentDidUpdate() {
        console.log('组件更新完成')
    }

    onFinish = (e) => {
        console.log(e)
    }
    normFile = (e) => {
        if (Array.isArray(e)) {
            return e
        }
        return e?.fileList
    }

    render() {
        console.log('类式组件', this)

        return (
            <>
                <div>
                    这是My 页面, 页面作者是{this.state.name},今年
                    {this.state.age}岁了
                </div>

                <div style={{ margin: '10px 0' }}>
                    <Button onClick={this.handleUpdate}>点击更新数据</Button>
                </div>

                <Form name='basic' labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} initialValues={{ remember: true }} onFinish={this.onFinish} autoComplete='off'>
                    <Form.Item label='头像' name='avatar'>
                        <Avatar icon={<UserOutlined />} />
                    </Form.Item>
                    <Form.Item label='用户名' name='username' rules={[{ required: true, message: '请输入用户名' }]}>
                        <Input />
                    </Form.Item>

                    <Form.Item label='手机号' name='phone' rules={[{ required: true, message: '请输入手机号' }]}>
                        <Input />
                    </Form.Item>

                    <ConfigProvider
                        theme={{
                            components: {
                                Radio: {
                                    colorPrimaryActive: '#f00',
                                },
                            },
                        }}
                    >
                        <Form.Item label='性别' rules={[{ required: true, message: '请选择性别' }]}>
                            <Radio.Group>
                                <Radio value='1'> 男 </Radio>
                                <Radio value='0'> 女 </Radio>
                            </Radio.Group>
                        </Form.Item>
                    </ConfigProvider>

                    <Form.Item label='所在地' name='select' rules={[{ required: true, message: '请选择城市' }]}>
                        <Select>
                            <Select.Option value='city1'>深圳</Select.Option>
                            <Select.Option value='city2'>上海</Select.Option>
                            <Select.Option value='city3'>武汉</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label='注册时间'>
                        <DatePicker />
                    </Form.Item>

                    <Form.Item label='文件上传' valuePropName='fileList' getValueFromEvent={this.normFile}>
                        <Upload action='/upload.do' listType='picture-circle'>
                            <div>
                                <PlusOutlined />
                                <div style={{ marginTop: 8 }}>Upload</div>
                            </div>
                        </Upload>
                    </Form.Item>

                    <Form.Item name='protocol' valuePropName='checked' wrapperCol={{ offset: 8, span: 16 }}>
                        <Checkbox>我已阅读并接受《用户协议》</Checkbox>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type='primary' size='large' shape='round' htmlType='submit'>
                            保存资料
                        </Button>
                    </Form.Item>
                </Form>
            </>
        )
    }
}
